import { useState } from "react";
import Table from "./Table";

const Demo2 = () =>
{
    // 状态变量 IsShow 用于保存渲染间的数据 SetIsShow 函数 更新变量并触发 React 再次渲染组件
    const [IsShow,SetIsShow] = useState(false);
    const [list] = useState([
        {
            id:1,
            name:'demo'
        },
        {
            id:2,
            name:'test'
        },
        {
            id:3,
            name:'admin'
        }
    ]);

    // 子组件
    const PersonPhoto = () =>
    {
        if(IsShow === true)
        {
            return <img style={{width:'300px',height:'500px',objectFit:'cover'}} src="https://i.imgur.com/c2FlNhT.jpeg" alt="测试" />;
        }else{
            return <></>;
        }
    }

    const OnShow = () =>
    {
        SetIsShow(true);
    }

    const OnHide = () =>
    {
        SetIsShow(false);
    }

    const OnDel = (id) =>
    {
        console.log(id);
    }

    const Button = ({ onClick, children }) =>
    {
        console.log(onClick,children);

        return (
            <button onClick={e => {
                // 阻止传播
                e.stopPropagation();
                onClick();
            }}>
                {children}
            </button>
        )
    }

    return (
        <>
            <button onClick={OnShow}>显示图片</button>
            <button onClick={OnHide}>隐藏图片</button>
            <PersonPhoto />

            <hr />

            {/* <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Operate</th>
                    </tr>
                </thead>
                <tbody>
                    {list.map(item =>
                    {
                        return (
                            <tr key={item.id}>
                                <td>{ item.id }</td>
                                <td>{ item.name }</td>
                                <td>
                                    <button>编辑</button>
                                    <button onClick={() => OnDel(item.id)}>删除</button>
                                </td>
                            </tr>
                        )
                    })}
                </tbody>
            </table> */}

            <div className="Toolbar" onClick={() => {
                alert('你点击了 toolbar ！');
            }}>
                <Button onClick={() => alert('正在播放！')}>
                    播放电影
                </Button>

                <button onClick={() => alert('正在上传！')}>
                    上传图片
                </button>
            </div>

            <Table list={list} OnDel={OnDel}></Table>
        </>
    )
}

export default Demo2;